<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" style="background-color:#F8F8F8;">
			<view class="header gui-border-b gui-border-box gui-flex gui-columns gui-justify-content-center" id="myheader">
				<gui-switch-navigation
					:size="180"
					:currentIndex="currentIndex"
					activeLineBg="linear-gradient(to right, #008AFF,#008AFF)"
					:items="tabs"
					@change="navchange"
				></gui-switch-navigation>
			</view>
			<swiper :current="currentIndex" @change="swiperChange" :style="{ height: mainHeight + 'px', width: '750rpx' }">
				<swiper-item v-for="(items, orderIndex) in orders" :key="orderIndex">
					<scroll-view
						:scroll-y="true"
						:scroll-top="scrollTops[currentIndex]"
						:style="{ height: mainHeight + 'px' }"
						@touchstart="touchstart"
						@touchmove="touchmove"
						@touchend="touchend"
						@scrolltolower="loadmorefun"
						@scroll="scroll"
					>
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="items == null">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<image
									class="gui-empty-img"
									src="https://upload-images.jianshu.io/upload_images/15372054-1f849183cebb80b1.png?imageMogr2/auto-orient/strip|imageView2/2/w/388/format/webp"
								></image>
							</view>
							<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">暂无数据</text>
						</gui-empty>
						<view @longtap="shezhi(item.out_trade_no, item.hexiao)" class="gui-order" v-if="items != null" v-for="(item, index) in items" :key="index">
							<view class="gui-flex gui-rows gui-space-between gui-align-items-center">
								<text class="gui-primary-color lizhili-ding">订单号 : {{ item.out_trade_no }}</text>
							</view>
							<view class="gui-order-goods gui-flex">
								<view class="gui-order-goods-img"><gui-image :src="imgServer + item.goods_img" :width="135" :height="135"></gui-image></view>
								<text class="gui-order-goods-name">{{ item.goods_name }}</text>
								<text class="gui-order-goods-price">x {{ item.order_num }}</text>
							</view>
							<view class="gui-order-footer gui-flex gui-rows gui-space-between" style="border-top: 1px #efefef dotted;padding-top: 25rpx;">
								<text class="gui-order-number">{{ item.create_time }} {{ item.attr }}</text>
								<text class="gui-order-number">手机：{{ item.phone }}</text>

								<text class="gui-order-number" v-if="item.hexiao">已核销</text>
								<text class="gui-order-number gui-order-btn-red" v-else>未核销</text>
							</view>
							<view v-if="item.beizhu" class="gui-order-footer gui-flex gui-rows gui-space-between" style="border-top: 1px #efefef dotted;padding-top: 25rpx;">
								<text class="gui-order-number">备注：{{ item.beizhu }}</text>
							</view>
						</view>
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gui-page>
</template>
<script>
var graceJs = require('@/lizhili/js/grace.js');
export default {
	data() {
		return {
			imgServer: '',
			pageLoading: true,
			tabs: [{ id: 1, name: '' }],
			currentIndex: 0,
			mainHeight: 200,
			orders: [],
			pages: [],
			scrollTops: [],
			scrollTimer: null,
			loadMoreTimer: null,
			apiLoadStatus: []
		};
	},
	onLoad: function() {
		this.imgServer = uni.common.imgServer;
		graceJs.getRefs('guiPage', this, 0, ref => {
			ref.getDomSize('guiPageBody', e => {
				graceJs.select('#myheader', e2 => {
					this.mainHeight = e.height - e2.height;
					setTimeout(() => {
						this.tabs = [{ id: 0, name: '未核销' }, { id: 1, name: '已核销' }, { id: 2, name: '全部订单' }];
						for (var i = 0; i < this.tabs.length; i++) {
							this.orders.push([]);
							this.pages.push(1);
							this.scrollTops.push(0);
							this.apiLoadStatus.push(false);
						}
						// 第一次加载数据
						this.getOrders();
					}, 500);
				});
			});
		});
	},
	watch: {
		currentIndex: function(nVal, oldVal) {
			if (this.orders[nVal] == null) {
				return;
			}
			if (this.orders[nVal].length < 1) {
				this.getOrders();
			}
		}
	},
	methods: {
		//设置
		shezhi(out_trade_no, hexiao) {
			if (hexiao) {
				return;
			}
			uni.showModal({
				title: '提示',
				content: '是否立即核销订单？',
				success: res => {
					if (res.confirm) {
						uni.common.post(
							uni.common.apiServer + 'my',
							{
								type: 'update_tuan_order_hexiao',
								out_trade_no: out_trade_no
							},
							false,
							res => {
								if (res.code == 1) {
									uni.showToast({
										icon: 'none',
										title: '核销成功'
									});
									this.pages[this.currentIndex] = 1;
									this.getOrders();
								} else {
									uni.showToast({
										icon: 'none',
										title: '获取失败'
									});
								}
							},
							e => {
								console.log(e);
							}
						);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 分类切换
		navchange: function(e) {
			this.currentIndex = e;
		},
		// 轮播切换
		swiperChange: function(e) {
			this.currentIndex = e.detail.current;
		},
		// 滚动区域滚动
		scroll: function(e) {
			if (this.scrollTimer != null) {
				clearTimeout(this.scrollTimer);
			}
			this.scrollTimer = setTimeout(() => {
				this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
			}, 100);
		},
		// 下拉刷新相关事件绑定
		touchstart: function(e) {
			if (this.apiLoadStatus[this.currentIndex]) {
				return;
			}
			if (this.scrollTops[this.currentIndex] > 0) {
				return;
			}
			this.$refs.refreshcom[this.currentIndex].touchstart(e);
		},
		touchmove: function(e) {
			if (this.apiLoadStatus[this.currentIndex]) {
				return;
			}
			if (this.scrollTops[this.currentIndex] > 0) {
				return;
			}
			this.$refs.refreshcom[this.currentIndex].touchmove(e);
		},
		touchend: function(e) {
			if (this.apiLoadStatus[this.currentIndex]) {
				return;
			}
			if (this.scrollTops[this.currentIndex] > 0) {
				return;
			}
			this.$refs.refreshcom[this.currentIndex].touchend(e);
		},
		// 刷新事件
		reload: function() {
			this.pages[this.currentIndex] = 1;
			this.$refs.loadmorecom[this.currentIndex].stoploadmore();
			this.getOrders(1);
		},
		// 加载更多事件
		loadmorefun: function() {
			var currentIndex = this.currentIndex;
			if (this.apiLoadStatus[currentIndex]) {
				return;
			}
			// 获取加载组件状态看一下是否还能继续加载
			if (this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0) {
				return;
			}
			// 保证触底只执行一次加载
			if (this.loadMoreTimer != null) {
				clearTimeout(this.loadMoreTimer);
			}
			this.loadMoreTimer = setTimeout(() => {
				this.$refs.loadmorecom[currentIndex].loading();
				// 此处开启加载动画执行加载数据的函数
				this.getOrders();
			}, 80);
		},
		// 新闻数据读取
		getOrders: function(isReload) {
			// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
			var currentIndex = this.currentIndex;
			console.log(this.pages[currentIndex]);
			// 更新 api 加载状态
			this.apiLoadStatus.splice(currentIndex, 1, true);
			if (this.pages[currentIndex] == 1 && !isReload) {
				this.pageLoading = true;
			}

			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_tuangou_order_list',
					name: this.tabs[currentIndex].name,
					page: this.pages[currentIndex]
				},
				false,
				res => {
					if (res.code == 1) {
						for (let i in res.data) {
							res.data[i].create_time = uni.common.to_time(res.data[i].create_time, 4);
						}
						if (this.pages[currentIndex] == 1) {
							this.orders.splice(currentIndex, 1, res.data);
						}
						// 之后的加载页
						else {
							this.orders[currentIndex] = this.orders[currentIndex].concat(res.data);
							this.$refs.loadmorecom[currentIndex].stoploadmore();
						}
					} else if (res.code == 2) {
						console.log('empty');
						this.orders.splice(currentIndex, 1, null);
						this.$refs.loadmorecom[currentIndex].stoploadmore();
					} else {
						console.log('nomore');
						this.$refs.loadmorecom[currentIndex].nomore();
					}
					// 刷新
					if (isReload) {
						this.$refs.refreshcom[currentIndex].endReload();
					}
					this.pages[currentIndex]++;
					// 更新 api 加载状态
					this.apiLoadStatus.splice(currentIndex, 1, false);
					this.pageLoading = false;
				},
				e => {
					console.log(e);
				}
			);
		}
	}
};
</script>
<style>
.lizhili-ding {
	font-size: 35rpx;
	line-height: 1.8;
	margin-bottom: 25rpx;
	border-left: 5rpx solid #4fd1aa;
	padding-left: 30rpx;
}
.header {
	padding: 15rpx 30rpx;
	height: 100rpx;
}
.gui-order {
	background-color: #ffffff;
	padding: 20rpx;
	margin: 25rpx;
	margin-bottom: 0rpx;
	border-radius: 10rpx;
}
.gui-order-number {
	line-height: 2;
	font-size: 28rpx;
}
.gui-shop {
	line-height: 60rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
}
.gui-order-goods {
	flex-direction: row;
	flex-wrap: nowrap;
	padding-bottom: 20rpx;
}
.gui-order-goods-img {
	width: 135rpx;
	height: 135rpx;
}
.gui-order-goods-name {
	line-height: 1.8;
	width: 200rpx;
	flex: 1;
	overflow: hidden;
	font-size: 30rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	color: #333333;
}
.gui-order-goods-price {
	font-size: 35rpx;
	line-height: 80px;
	color: #ff007f;
	width: 80rpx;
	text-align: right;
}
.gui-order-footer {
	margin-top: 2px;
}

.gui-order-status {
	line-height: 50rpx;
	color: #999999;
	font-size: 26rpx;
	width: 100rpx;
	text-align: center;
}
.gui-order-btn {
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	color: #999999;
	font-size: 22rpx;
	text-align: center;
	border-radius: 60rpx;
	margin-left: 20rpx;
}
.gui-order-btn-red {
	border-color: #ff0036;
	color: #ff0036;
}
</style>
